<template>
  <div>
    <div>
      <el-button type="success" @click="handleShowSaveDialog(0)">
        添加
      </el-button>
    </div>
    <!-- 菜单树形数据表格 -->
    <div>
      <el-table
        :data="menus"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
      >
        <el-table-column prop="title" label="菜单标题" sortable />
        <el-table-column prop="component" label="路由名称" sortable />
        <el-table-column prop="sortValue" label="排序" sortable />
        <el-table-column prop="status" label="状态" sortable #default="scope">
          {{ +scope.row.status === 1 ? '可用' : '禁用' }}
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable />
        <el-table-column label="操作" width="260">
          <template #default="scope">
            <el-button
              size="small"
              type="success"
              @click="handleShowSaveDialog(scope.row.id)"
            >
              添加下级菜单
            </el-button>
            <el-button
              size="small"
              type="primary"
              @click="handleEdit(scope.row)"
            >
              修改
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增/修改菜单的对话框 -->
    <div>
      <el-dialog v-model="dialogFormVisible" :title="title">
        <el-form :model="menu">
          <el-form-item label="菜单标题" :label-width="formLabelWidth">
            <el-input v-model="menu.title" autocomplete="off" />
          </el-form-item>

          <el-form-item label="路由名称" :label-width="formLabelWidth">
            <el-input v-model="menu.component" autocomplete="off" />
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input v-model="menu.sortValue" autocomplete="off" />
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-radio v-model="menu.status" :label="1" size="large">
              正常
            </el-radio>
            <el-radio v-model="menu.status" :label="0" size="large">
              停用
            </el-radio>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSaveOrUpdateMenu">
              提交
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  GetNestedMenus,
  DeleteMenu,
  SaveMenu,
  GetMenuById,
  UpdateMenu,
} from '@/api/sysMenu'
onMounted(() => {
  initPageData()
})
//更新菜单按钮事件函数
const handleEdit = async row => {
  //查询数据回显
  const { data } = await GetMenuById(row.id)
  menu.value = data.item
  //弹出对话框
  title.value = '更新'
  dialogFormVisible.value = true
}

//新增/修改菜单对话框属性 和函数
const dialogFormVisible = ref(false)
const title = ref('添加')
const menu = ref({
  status: 1,
})
const formLabelWidth = '120px'
const handleSaveOrUpdateMenu = () => {
  if (menu.value.id) {
    //更新
    handleUpdate()
  } else {
    //新增
    handleSave()
  }
}
//新增函数
const handleSave = async () => {
  await SaveMenu(menu.value)
  ElMessage.success('新增菜单成功')
  initPageData() //刷新页面数据
  dialogFormVisible.value = false //关闭对话框
}
//更新函数
const handleUpdate = async () => {
  await UpdateMenu(menu.value)
  dialogFormVisible.value = false
  initPageData()
}
//新增按钮  /新增下级菜单按钮事件函数(参数为新增菜单的parentId)
const handleShowSaveDialog = pid => {
  title.value = '新增'
  menu.value = {
    status: 1,
  }
  menu.value.parentId = pid //为新增菜单 设置parentId属性值
  dialogFormVisible.value = true
}

const menus = ref([])
const initPageData = async () => {
  const { data } = await GetNestedMenus()
  menus.value = data.items
}
//删除按钮事件函数
const handleDelete = async row => {
  await DeleteMenu(row.id)
  ElMessage.success('删除成功')
  initPageData()
}
</script>
